﻿@{
    ViewBag.Title = "用户注册";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

@section style {
    <link rel="stylesheet" href="/Static/Template/css2/normalize.css">
    <link rel="stylesheet" href="/Static/Template/css2/common.css">
    <link rel="stylesheet" href="/Static/Template/css2/server.css">

    <!--[if lt IE 9]>
        <script src="/bower_components/html5shiv/dist/html5shiv.min.js"></script>
    <![endif]-->
}


<header class="usercenter-header">
    <img src="/Static/Template/image/header_bg.png" class="header-image" />
    <div class="logos">
        <img src="/Static/Template/image/default.png" alt="云校logo" class="yx-logo" style="margin-left: -96px;" />
    </div>
</header>

<div class="yx-content">
    <!-- 页面内容区域 -->
    <article class="usercenter-container">
        <header class="tab-title">
            <!--未被选择的加上unactive-->
            <span name="email">邮箱注册</span>
            <b>|</b>
            <span class="unactive" name="mobile">手机号码注册</span>
        </header>

        <!--创建云校帐号表单-->
        <form class="create-account" role="form" id="registerForm">
            <!-- 0 是邮箱注册 2 是邮箱注册  -->
            <input type="hidden" value="0" id="register_Type" />
            <!--验证帐号 当输入的是电话时再form-list后添加account-phone -->
            <!--当输入的是邮箱时再form-list后添加account-email-->
            <section class="form-list account-email">
                <input type="text" id="emailAddress" placeholder="请输入邮箱地址" class="address">
                <!--右侧检测结果状态 验证中，在validate后添加 checking 验证正确后，添加right 错误添加error -->
                <aside class="validate">
                    <span></span>
                </aside>
            </section>
            <section class="form-list account-phone hide">
                <input type="text" id="mobileAddress" placeholder="请输入手机号码" class="address">
                <!--右侧检测结果状态 验证中，在validate后添加 checking 验证正确后，添加right 错误添加error -->
                <aside class="validate">
                    <span></span>
                </aside>
            </section>

            <section class="form-list account-password">
                <input type="password" id="password" maxlength="20" placeholder="请输入密码">

                <label class="capital hide"></label>
                <!--分为三种状态 checking right error -->
                <aside class="validate hide">
                    <span></span>
                </aside>
            </section>

            <section class="form-list captchas-validate">
                <div class="captchas-img">
                    <img id="captchaImage" data-url="/Utility/ValidateCode" data-captcha="dc9b096a-d3b6-4cf1-a5b8-47f205a9b70d" src="/Utility/ValidateCode" alt="验证码" />
                    <a id="captchaRefresh">换一张</a>
                </div>
                <input type="text" id="emailCaptcha" maxlength="4" placeholder="输入验证码">
                <aside class="validate">
                    <span></span>
                </aside>
            </section>

            <section class="form-list photo-validate hide">
                <input type="text" id="mobileCaptcha" maxlength="4" placeholder="输入短信验证码">
                <a id='getCaptcha'>获取短信验证码</a>
                <span class='afterTime hide'>获取短信验证码</span>
                <aside class="validate">
                    <span></span>
                </aside>
            </section>

            <!--用户协议提醒-->
            <section class="form-list user-protocol">
                点击注册，即同意我们的 <a id="btn-agreement">用户协议</a>
            </section>

            <section class="form-list">
                <a class="account-btn account-submit" id="btn-register">注册</a>
            </section>

            <section class="form-list">
                <a class=" account-btn account-other" id="btn-login">已有帐号？直接登录 <span class="login-go"></span>
                </a>
            </section>
        </form>
    </article>
</div>



<footer class="usercenter-footer">
    <ul>
        <li><a href="http://www.yunxiao.com">云校官网</a></li>
        <li><a href="http://paike.yunxiao.com">排课</a></li>
        <li><a href="http://bbs.yunxiao.com">论坛</a></li>
        <li><a>北京修齐治平科技有限公司 ©2015</a></li>
    </ul>
</footer>

@section script {

    <script type="text/javascript">
        $(function () {

            // 注册界面切换和注册类型保存
            $(".tab-title span").on("click", function () {
                var $this = $(this);
                $(this).removeClass("unactive");
                $(this).siblings().addClass("unactive");

                var index = $this.index();
                if (index == 0) {
                    $(".account-phone").addClass("hide");
                    $(".account-email").removeClass("hide");
                    $(".photo-validate").addClass("hide");
                    // 邮箱正则
                    registerReg = /\w[-\w.+]*@@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
                } else {
                    $(".account-email").addClass("hide");
                    $(".account-phone").removeClass("hide");
                    $(".photo-validate").removeClass("hide");
                }

                $("#register_Type").val(index);
            });

            $("#btn-register").on("click", function () {
                console.log("进来了吗？");
                if (validateForm()) {
                    var account = $("#register_Type").val() == "0" ? $("#emailAddress").val() : $("#mobileAddress").val();
                    var password = $("#password").val();
                    var validateCode = $("#emailCaptcha").val();
                    //$.post
                    $.post("Register",
                        {
                            userName: account,
                            password: password,
                            validateCode: validateCode
                        },
                    function (data) {
                        if (data.status) {
                            window.location.href = "/Home";
                        }
                    },
                    "json")
                }
            });

            /// 验证码正则
            var codeRegex = /^[0-9a-zA-Z]{4}$/;
            /// 邮箱注册验证表单
            function validateForm() {
                // 获取注册类型 
                var registerType = $("#register_Type").val();
                var userAccount = registerType == "0" ? $("#emailAddress").val() : $("#mobileAddress").val();

                regex = registerType == "0" ? /\w[-\w.+]*@@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/ : /^0?(13|14|15|17|18|19)[0-9]{9}$/;

                if (!regex.test(userAccount)) {
                    // alert("账号格式错误!");// 给出错误提示
                    if (registerType == "0") { // 邮箱注册
                        $("#emailAddress").addClass("error-info");
                    } else {
                        $("#mobileAddress").addClass("error-info");
                    }
                    return;
                }


                var userPassword = $("#password").val();
                if (userPassword.length < 6) {
                    $("#password").addClass("error-info");
                    return;
                }


                var validateCode = $("#emailCaptcha").val();
                if (!validateCode) {
                    $("#emailCaptcha").addClass("error-info");
                    return;

                }


                if (registerType == "2") {
                    var codeRegex = /^\d{4}$/;
                    var $that = $("#mobileCaptcha");
                    if (!codeRegex.test($that.val())) {
                        $that.addClass("error-info");
                        return;
                    }
                }

                return true;
            }

            // 获取焦点取消样式
            (function () {
                $(".create-account input").focus(function () {
                    $(this).removeClass("error-info");
                });
            })();

            // 获取验证码
            (function getValidateCode() {
                $("#captchaRefresh").on("click", function () {
                    $("#captchaImage").attr("src", "/Utility/ValidateCode?v=" + Math.random());
                });
            })();


            // 获取手机验证码
            $("#getCaptcha").on("click", function () {
                var phoneNum = $("#mobileAddress").val();
                var phoneReg = /^0?(13|14|15|17|18|19)[0-9]{9}$/;
                if (!phoneReg.test(phoneNum)) { $("#mobileAddress").addClass("error-info"); return; }

                // 往后台请求短信发送验证。
                $.get("/Utility/getPhoneValidateCode", { phoneNum: phoneNum }, function (data) {
                    console.log(data);
                });
            });

            //验证手机号验证码是否正确(无需重复验证)
            $("#mobileCaptcha").blur(function () {
                var $this = $(this);
                var codeRegex = /^\d{4}$/;
                if (!codeRegex.test($this.val())) { $(this).addClass("error-info");; return; }

                $.get("/Utility/PhoneCodeValidate", { code: $this.val() }, function (data) {
                    if (data.isPass) {

                    } else {
                        $("#mobileCaptcha").addClass("error-info");
                    }
                })
            })


        })
    </script>
    <style type="text/css">
        .error-info {
            border-color: red !important;
        }
    </style>
}